<template>
  <view class="cardPurchase">
    <!--购卡-->
    <z-paging :paging-style="{ padding: '20rpx' }" safe-area-inset-bottom>
      <!--:style="{ backgroundImage: ` url(${urlTobase64('cardPurchasePicture', item.image)})` }"-->
      <view v-for="(item, index) in cardPurchaseList" :key="index" class="rounded-2xl p-2 cardPurchasePicture">
        <text class="font-bold text-white line-clamp-1 text-sm">
          {{ item.name }}
        </text>

        <view class="flex items-center justify-between mt-[28rpx]">
          <view class="text-white">
            ￥
            <text class="font-bold text-[64rpx]">
              {{ item.price }}
            </text>
          </view>
          <u-button
            :custom-style="{ 'box-shadow': '0rpx 0rpx 20rpx 2rpx #806FBE' }"
            shape="circle"
            type="warning"
            @click="routerPath"
          >
            立即购买
          </u-button>
        </view>
      </view>
    </z-paging>
  </view>
</template>
<script lang="ts" setup>
// 购卡数组
const cardPurchaseList = [
  {
    name: '青少年新人20次攀岩课',
    price: '100.00',
    image: 'cardPurchasePicture-0'
  },
  {
    name: '青少年新人20次攀岩课',
    price: '1500.00',
    image: 'cardPurchasePicture-1'
  },
  {
    name: '皮划艇10次卡',
    price: '4900.00',
    image: 'cardPurchasePicture-2'
  },
  {
    name: '皮划艇10次卡',
    price: '4900.00',
    image: 'cardPurchasePicture-3'
  }
];

// 路由跳转
const routerPath = () => {
  uni.$u.route({
    url: '/pages/cardPurchase/confirmCardPurchase'
  });
};
</script>

<style lang="scss" scoped>
.cardPurchase {
  width: 100%;
  height: 100vh;

  .cardPurchasePicture {
    padding: 48rpx 40rpx;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    + .cardPurchasePicture {
      margin-top: 20rpx;
    }
  }
}
</style>
